<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="keyWord" />
    <PatList :filData="filData" @detailInfo="detailInfo"></PatList>
    <DetailMsg
      :detailObj="detailObj"
      v-show="isShow"
      @closeShow="closeShow"
    ></DetailMsg>
  </div>
</template>
<script>
import PatList from '@/components/PatList.vue'
import DetailMsg from './components/DetailMsg.vue'
export default {
  components: {
    PatList,
    DetailMsg,
  },
  data() {
    return {
      patientList: [
        { date: '2022-01-01', docname: '张三', result: '感冒', info: '感冒药' },
        { date: '2022-02-01', docname: '李四', result: '头疼', info: '止疼药' },
        { date: '2022-03-01', docname: '王五', result: '腰疼', info: '止痛药' },
      ],
      keyWord: '',
      filData: [],
      detailObj: {},
      isShow: false,
    }
  },

  methods: {
    detailInfo(item) {
      this.detailObj = item
      console.log(this.detailObj)
      this.isShow = !this.isShow
    },
    closeShow() {
      this.isShow = !this.isShow
    },
  },
  watch: {
    keyWord: {
      immediate: true,
      handler(value) {
        this.filData = this.patientList.filter(
          (item) => item.docname.indexOf(value) !== -1
        )
      },
    },
  },
}
</script>
<style scoped></style>
